<template>
	<div style="padding:15rpx;">
		<div style="display:flex; justify-content:space-around; margin-bottom:30rpx;">
			<div @tap="filterOrder(0)" :class="{ actived: orderType === 0 }">全部</div>
			<div @tap="filterOrder(1)" :class="{ actived: orderType === 1 }">待付款</div>
			<div @tap="filterOrder(2)" :class="{ actived: orderType === 2 }">待收货</div>
			<div @tap="filterOrder(3)" :class="{ actived: orderType === 3 }">退款</div>
		</div>
		<div v-if="allOrders == null || allOrders.length == 0" style="text-align:center; color:gray">
			<image src="@/static/img/loading.gif" style="width:370rpx; height:250rpx;" mode=""></image>
			<view>订单表空空如也，快去下单吧</view>
		</div>
		<div v-else>
			<div v-for="(order, index) in orderList" :key="index" style="padding: 10rpx 20rpx;margin-bottom: 20rpx;box-shadow: 0 0 10rpx #d4d4d4;">
				<div style="display:flex; justify-content:space-between; line-height:70rpx;">
					<div style="font-size:80%; color:gray;">{{ $dateUtil.fmtDate(order.createTime) }}</div>
					<div :style="{ color: statusColorMap[order.orderStatus] }">{{ statusCNMap[order.orderStatus] }}</div>
				</div>
				<!-- 订单商品列表 -->
				<div v-for="(goods, goodsIndex) in order.goodsList" :key="goodsIndex" style="display: flex; font-size: 30rpx; ">
					<image :src="goods.image" style="margin: 10rpx ; width: 120rpx; height: 120rpx;" mode=""></image>
					<div style="width: 550rpx;">
						<div style="display: flex; justify-content:space-between;">
							<div style=" width: 400rpx; white-space: nowrap; overflow: hidden;">{{ goods.name }}</div>
							<div style="">￥{{ goods.price / 100 }}</div>
						</div>
						<div style="display: flex; justify-content:space-between;">
							<div style=" width:400rpx;white-space:nowrap;overflow:hidden;color:gray">{{ goods.propertyStr }}</div>
							<div>x{{ goods.count }}</div>
						</div>
						<div style="color:red" v-if="goods.refundNo">已退款</div>
					</div>
				</div>
				<!-- 总金额-操作订单 -->
				<div style="display:flex; justify-content:space-between; ">
					<div v-if="order.orderStatus === statusMap.NotPay">待支付￥{{ order.totalPrice / 100 }}</div>
					<div v-else>实付￥{{ order.payPrice / 100 }}</div>

					<div style="display:flex; justify-content:flex-end;">
						<div v-if="order.orderStatus === statusMap.NotPay" @tap="calcelOrder(order.orderNo)" class="btn">取消</div>
						<div v-if="order.orderStatus === statusMap.NotPay" @tap="orderPay(order.orderNo)" class="btn">支付</div>
						<div v-if="order.orderStatus === statusMap.WaitTake" @tap="confirmReceive(order.orderNo)" class="btn">确认收货</div>
						<div class="btn" @tap="showOrderDetail(order)">详情</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 订单详情 -->
		<div v-if="flagShowOrderDetail" class="mask" @tap="flagShowOrderDetail = false"></div>
		<div v-if="flagShowOrderDetail" class="orderDetail" @tap="flagShowOrderDetail = false">
			<div>订单号：{{ curOrder.orderNo }}</div>
			<div>配送方式：{{ curOrder.takeType === 1 ? '外卖配送' : '到店自取' }}</div>
			<div>地址：{{ curOrder.addressDetail }}</div>
			<div>
				收货人信息：
				<text style="margin-right:20rpx">{{ curOrder.receiver }}</text>
				<text>{{ curOrder.userPhone }}</text>
			</div>
			<div>
				商品列表：
				<div v-for="(goods, index) in curOrder.goodsList" :key="index" style="font-size:30rpx;line-height:35rpx;padding:5rpx 30rpx;">
					<div>{{ goods.name }} [{{ goods.propertyStr }}]</div>
					<div>价格￥{{ goods.price }} 数量{{ goods.count }}</div>
					<div style="color:red" v-if="goods.refundNo">退款号：{{ goods.refundNo }}（已退款）</div>
					<div v-if="goods.refundReason">退款原因：{{ goods.refundReason }}</div>
				</div>
			</div>
			<div>订单总额：￥{{ curOrder.totalPrice / 100 }}</div>
			<div>实际支付：￥{{ curOrder.payPrice / 100 }}</div>
			<div>微信交易号：{{ curOrder.wxPayTransactionId }}</div>
			<div>下单时间：{{ $dateUtil.fmtDate(curOrder.createTime) }}</div>
			<div v-if="curOrder.payTime">支付时间：{{ $dateUtil.fmtDate(curOrder.payTime) }}</div>
			<div v-if="curOrder.extraInfo">订单备注：{{ curOrder.extraInfo }}</div>
		</div>
	</div>
</template>

<script>
import * as orderApi from '@/api/orderApi.js';
import * as payApi from '@/api/payApi.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			orderType: 0, // 显示的订单类型
			statusMap: {},
			statusCNMap: {
				1: '未支付',
				2: '待发货',
				5: '待收货',
				10: '已完成',
				11: '退款中',
				12: '已退款'
			},
			statusColorMap: {
				1: 'black',
				2: 'orange',
				5: 'orange',
				10: 'green',
				11: 'red',
				12: 'red'
			},
			flagShowOrderDetail: false, // 显示订单详情弹窗
			curOrder: {}, // 订单
			allOrders: [], // 所有订单
			orderList: [] // 显示的订单列表
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onShow() {
		this.getOrderList();
		this.statusMap = this.$config.orderStatus;
	},
	methods: {
		getOrderList() {
			if (!(this.userInfo && this.userInfo.id > 0)) return;
			orderApi.getOrderList({
				success: res => {
					this.allOrders = res.data;
					// 订单商品的属性：
					for (let i = 0; i < this.allOrders.length; i++) {
						this.allOrders[i].goodsList.forEach(goods => {
							let str = '';
							for (let k in goods.propertyMap) {
								if (str.length > 0) str += ',';
								str += goods.propertyMap[k];
							}
							goods.propertyStr = str;
						});
					}
					this.filterOrder(this.orderType);
				}
			});
		},
		// 表单分类: 0：全部，1：待付款，2；待收货，3：退款
		filterOrder(type) {
			this.orderType = type;
			this.orderList = this.allOrders.filter(order => {
				if (type === 0) {
					return true;
				} else if (type === 1) {
					return order.orderStatus === this.statusMap.NotPay;
				} else if (type === 2) {
					return order.orderStatus === this.statusMap.WaitSend || order.orderStatus === this.statusMap.WaitTake;
				} else if (type === 3) {
					return order.orderStatus === this.statusMap.Refunding || order.orderStatus === this.statusMap.Refunded || order.refundCount > 0;
				}
				return false;
			});
		},
		// 显示订单详情页
		showOrderDetail(order) {
			this.curOrder = order;
			this.flagShowOrderDetail = true;
		},
		// 取消并删除订单
		calcelOrder(orderNo) {
			orderApi.cancelOrder({
				orderNo: orderNo,
				success: () => {
					this.$msg('取消成功，已删除订单');
					this.getOrderList();
				}
			});
		},
		// 支付订单
		orderPay(orderNo) {
			uni.navigateTo({
				url: '/pages/order/pay?orderNo=' + orderNo
			});
		},
		// 确认收货
		confirmReceive(orderNo){
			orderApi.confirmReceive({
				orderNo: orderNo,
				success: ()=>{
					this.getOrderList();
				}
			})
		}
	}
};
</script>

<style>
.actived {
	color: blue;
}
.btn {
	border: 1px solid #dedede;
	padding: 5rpx 10rpx;
	margin: 5rpx;
}
.btn:active {
	font-weight: bold;
}

/* 订单详情弹窗 */
.orderDetail {
	position: fixed;
	top: 15vh;
	left: 3%;
	width: 90%;
	max-height: 70vh;
	overflow-y: scroll;
	z-index: 1000;
	background-color: white;
	padding: 2%;
	line-height: 50rpx;
	color: #5a5a5a;
}

/* 弹窗遮罩 */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90;
	background-color: black;
	opacity: 0.4;
}
</style>
